<!DOCTYPE html>
<html>
<head>
	
	<title><?php echo _MANAGER_TITLE_; ?></title>

	<?php $this->setFlag('edit,vue'); ?>
	<?php $this->import('meta'); ?>

	<link rel="stylesheet" type="text/css" href="html/manager/account/css/addrole.css" />

    <script type="text/javascript" src="html/manager/account/js/addrole.js"></script>

</head>
<body style="background-color: #ececec;">

	<div id="mainBg" class="bg" style="display: none;">

		<div class="title-bar">添加角色信息</div>

		<input type="text" id="code" class="display-none" />
		<input type="text" id="flag" value="add" class="display-none" />
		<input type="text" id="roleid" class="display-none" />

		<div class="rect">
			<div class="title">
				<div class="order">1</div>
				<div class="text">角色资料</div>
			</div>
			<div class="tr1">
				<div class="field1">角色名称：</div>
				<div class="value1">
					<input type="text" id="rolemc" class="input1 w1" maxlength="18" placeholder="请填入角色名称" autocomplete="off" />
				</div>
			</div>
			<div class="tr1">
				<div class="field1">角色类型：</div>
				<div class="value1">
					<select id="roleType" class="select3">
						<option value="">请选择</option>
						<option value="0">管理岗</option>
						<option value="1">运营岗</option>
						<option value="2">研发岗</option>
						<option value="3">试用岗</option>
					</select>
				</div>
			</div>
			<div class="tr1">
				<div class="field1">状态：</div>
				<div class="value1">
					<input type="radio" name="status" class="chenk1" checked="checked" value="1" />启用
                    <input type="radio" name="status" class="chenk2" value="0" />关闭
				</div>
			</div>
			<div class="tr1">
				<div class="field1">顺序：</div>
				<div class="value1">
					<input type="text" id="sx" class="input1 w3" autocomplete="off" onkeyup="validationNumber(this, 0)" />
				</div>
			</div>
		</div>

		<div id="menuBar" class="rect">
			<div class="title">
				<div class="order">2</div>
				<div class="text">菜单权限</div>
			</div>

			<div class="tr5" v-for="menu in list">
				<div v-bind:id="'menu_top_' + menu.id" class="role-top">
					<div v-bind:id="'menu_top_left_' + menu.id" class="role-top-left"></div>
					<div v-bind:id="'menu_top_right_' + menu.id" class="role-top-right" v-on:click="selectTopMenu(menu.id)">{{ menu.name }}</div>
				</div>

				<div class="tr60" v-for="parent in menu.parent">
					<div class="field3">
						<div v-bind:id="'menu_parent_' + parent.id" class="role-parent">
							<div v-bind:id="'menu_parent_left_' + parent.id" class="role-parent-left"></div>
							<div v-bind:id="'menu_parent_right_' + parent.id" class="role-parent-right" v-on:click="selectParentMenu(parent.id)">{{ parent.name }}</div>
						</div>
					</div>

					<div class="value30">
						<div v-bind:id="'menu_child_' + child.id" class="role-child" v-on:click="selectChildMenu(child.id)" v-for="child in parent.child">{{ child.name }}</div>
					</div>
				</div>
			</div>

		</div>

		<div class="button1" onclick="save()">保存</div>

		<script type="text/javascript">
        	var menuList = new Vue({
	            el: '#menuBar',
	            data: {
	                list: ''
	            }
	        });
        </script>

	</div>

</body>
</html>